﻿<template>
  <div class="user-info">
    <el-breadcrumb separator="/" >
      <el-breadcrumb-item>系统设置</el-breadcrumb-item>
      <el-breadcrumb-item>个人信息</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="user-content">
      <el-form
          ref="personalData"
          :model="form"
          :rules="rules"
          size="medium"
          label-width="50px">
        <el-form-item label="头像" prop="avatar">
          <div>
            <user-avatar :user="form"></user-avatar>
          </div>
        </el-form-item>
        <el-form-item label="昵称" prop="nickName">
          <el-input
              v-model="form.nickName"
              placeholder="请输入您的昵称"
              :maxlength="10"
              clearable
              :style="{ width: '70%' }"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="form.region" placeholder="男">
            <el-option label="男" value="shanghai"></el-option>
            <el-option label="女" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="简介" prop="autograph">
          <el-input
              v-model="form.userDesc"
              type="textarea"
              placeholder="请输入您的个人简介"
              show-word-limit
              :autosize="{ minRows: 3, maxRows: 5 }"
              :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
        <el-form-item size="large">
          <el-button type="primary" @click="submitForm">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import UserAvatar from "@/views/person/info/components/UserAvatar";

import store from "@/store";
export default {
  name: "UserInfo",
  components: {UserAvatar},
  data(){
   return {
     form: {
       avatar: store.getters.avatar,
       nickName:store.getters.name,
       userDesc:'',
     },
     uploadImgUrl: "",
     rules: {
       avatar: [],
       nickName: [
         {
           required: true,
           message: "请输入您的昵称",
           trigger: "blur",
         },
       ],
     },
   }
  },
  computed: {

  },
  methods:{
    submitForm(){
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          console.log(this.ruleForm)
        } else {
          return false;
        }
      });
    },
  }
}
</script>

<style lang='scss' scoped>
.user-info{
  width: 100%;
  height: 100%;
  .user-content{
    width: 50%;
    margin: 0 auto;
    text-align: left;
    padding: 10px 40px;
  }
}
</style>
